// <template>
//   <div>
//     <h1>商品列表</h1>
//     <ul>
//       <li v-for="product in productList" :key="product.id">
//         {{ product.name }} - {{ product.price }}
//       </li>
//     </ul>
//     <button @click="fetchProducts">获取商品列表</button>
//     <button @click="addProduct">Add Product</button>
//   </div>
// </template>

// <script>
// import { getProductList, addProduct } from '@/api/product.js';

// export default {
//   data() {
//     return {
//       productList: []
//     };
//   },
//   methods: {
//     async fetchProducts() {
//       try {
//         const response = await getProductList();
//         this.productList = response.data;
//       } catch (error) {
//         console.error('Error fetching products:', error);
//       }
//     },
//     async addProduct() {
//       const newProduct = {
//         name: 'New Product',
//         price: 9.99
//       };
//       try {
//         const response = await addProduct(newProduct);
//         console.log('Product added:', response.data);
//         this.fetchProducts(); // Refresh product list
//       } catch (error) {
//         console.error('Error adding product:', error);
//       }
//     }
//   },
//   mounted() {
//     this.fetchProducts();
//   }
// };
// </script>

// <style scoped>
// /* 添加您的样式 */
// </style>